<template>
  <div class="wrap">
    <div class="item">
      <p class="title">手机号</p>
      <van-field v-model="tel" type="tel" placeholder="请输入手机号" maxlength="11" />
    </div>

    <div class="item itemMsg">
      <p class="title">验证码</p>
      <van-field
        v-model="sms"
        center
        clearable
        maxlength="6"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" v-if="sureIf==1" type="primary" color="#000" @click="getCode"
            >发送验证码</van-button>
            <van-button size="small" v-else type="primary" color="#000"
            >{{seconds}}S</van-button>
        </template>
      </van-field>
    </div>
    <button class="loginBtn"  @click="jumpLogin">登录</button>
  </div>
</template>

<script>
import { regex } from '@/assets/js/identyRules.js'
import { Field, Button } from "vant";
import { apiLogin, apiEnterApplyDetails, getCodeReq } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      tel: "",
      sms: "",
      resEnterApplyInfo: "", //商户资料填写情况
      seconds: 60, //发送验证码倒计时
			sureIf: 1, //1代表显示重新获取btn
    };
  },
  mounted() {
    sessionStorage.removeItem("applyInformation"); //清除上一步填写的申请资料
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
  },
  methods: {
    //获取短信验证码:
    getCode() {
       if(!regex.phone.test(this.tel)){
        this.$toast.fail('请输入正确的手机号')
        return
      }
      getCodeReq({
        type: 2,
        mobile: this.tel,
      }).then((res) => {
        if (res.code == 200) {
          this.timer()
          this.$toast.success("发送成功，请注意查收");
        }
        console.log("getCodeReq", res);
      });
    },
    //登录：
    jumpLogin() {
      var that = this;
      if (this.tel == "" || this.sms == "") {
        this.$toast.fail("请填写正确完整信息");
      }
      console.log("登录");
      apiLogin({
        checkCode: this.sms,
        mobile: Number(this.tel),
        openId: localStorage.getItem("openId"),
        loginType: 2,
      }).then((res) => {
        // console.log("res-login", res);
        if (res.code === 200) {
          sessionStorage.setItem("loginInfo", JSON.stringify(res.data));
          // localStorage.setItem("loginInfo", JSON.stringify(res.data));
          this.$router.push({
            path: "/pages/bIndex",
            query: {
              //传递参数
            },
          });
        }
        // this.$router.push("pages/bshopselect")





        // else if (res.code == 20018) {
        //   //租金低于最低要求 过期需续租
        //   sessionStorage.setItem("loginInfo", JSON.stringify(res.data));
        //   this.$router.push({
        //     path: "/pages/bRelet",
        //     query: {
        //       //传递参数
        //        fromId:0
        //     },
        //   });
        // }else if (res.code == 20010) {
        //   console.log(20010)
        //   //押金低于最低要求
        //   sessionStorage.setItem("loginInfo", JSON.stringify(res.data));
        //   this.$router.push({
        //     path: "/pages/bCashPledgeGive",
        //     query: {
        //       //传递参数
        //       fromId:0
        //     },
        //   });
        // }
      });
    },
    // 倒计时:
		timer() {
			var _this = this;
			this.sureIf = 0;
			this.seconds = 60;
			var time = setInterval(function() {
				if (_this.seconds !== 0) {
					_this.waitTime = 1;
					_this.seconds -= 1;
					_this.sureIf = 0;
				} else if (_this.seconds === 0) {
					_this.waitTime = 0;
					_this.sureIf = 1;
					clearInterval(time);
				}
			}, 1000);
		},
  },
  created() {},
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
  },
};
</script>

<style scoped>
.wrap {
  /* margin-top: 30px; */
  width: 95%;
  margin: 20px auto;
}
.item {
  margin-bottom: 26px;
}
.title {
  font-size: 13px;
  font-weight: 400;
  color: #181818;
  margin-bottom: 16px;
}
.van-cell {
  border-radius: 22px;
}
.van-field__button button {
  background: #f48f5b !important;
  border-color: #f48f5b !important;
  border-radius: 22px;
}
.itemMsg .van-cell{
  padding: 6px 16px !important;
}
.loginBtn {
  width: 90%;
  margin: 20px auto;
  margin-left: 3%;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  height: 50px;
  /* line-height: 50px; */
  border: 0px;
  border-radius: 22px;
  text-align: center;
  position: fixed;
  bottom: 22px;
}
</style>
